<template>
  <div>
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="30%">
      <el-input v-model="dialogObject.name" placeholder="请输入要修改的品牌名"/>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="edit">确 定</el-button>
  </span>
    </el-dialog>
    <el-tabs v-model="activeName">
      <el-tab-pane label="CPU品牌管理" name="cpu">
        <el-table :data="cpuBrand" stripe style="width: 100%">
          <el-table-column prop="id" label="ID"/>
          <el-table-column prop="name" label="品牌名"/>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button-group>
                <el-button type="primary" icon="el-icon-edit" @click="showEdit(scope.$index)"></el-button>
                <el-button type="primary" icon="el-icon-delete" @click="del(scope.$index)"></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="显卡品牌管理" name="gpu">
        <el-table :data="gpuBrand" style="width: 100%">
          <el-table-column prop="id" label="ID"/>
          <el-table-column prop="name" label="品牌名"/>
          <el-table-column label="操作" fixed="right">
            <template slot-scope="scope">
              <el-button-group>
                <el-button type="primary" icon="el-icon-edit" @click="showEdit(scope.$index)"></el-button>
                <el-button type="primary" icon="el-icon-delete" @click="del(scope.$index)"></el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: 'cpu',
      cpuBrand: [],
      gpuBrand: [],
      dialogVisible: false,
      dialogObject: { id: 0, name: '' }
    }
  },
  created() {
    this.refreshAll()
  },
  methods: {
    refreshAll() {
      this.dialogVisible = false
      const that = this
      this.$http.get('/cpu/brand/all').then(value => {
        that.cpuBrand = value.data
      })
      this.$http.get('/gpu/brand/all').then(value => {
        that.gpuBrand = value.data
      })
    },
    showEdit(index) {
      if (this.activeName === 'cpu') {
        this.dialogObject.id = this.cpuBrand[index].id
        this.dialogObject.name = this.cpuBrand[index].name
      } else if (this.activeName === 'gpu') {
        this.dialogObject.id = this.gpuBrand[index].id
        this.dialogObject.name = this.gpuBrand[index].name
      }
      this.dialogVisible = true
    },
    edit() {
      switch (this.activeName) {
        case 'cpu':
          this.$http.put('/cpu/brand/' + this.dialogObject.id, this.dialogObject).then(this.refreshAll)
          break
        case 'gpu':
          this.$http.put('/gpu/brand/' + this.dialogObject.id, this.dialogObject).then(this.refreshAll)
          break
      }
      this.refreshAll()
    },
    del(index) {
      switch (this.activeName) {
        case 'cpu':
          this.$http.delete('/cpu/brand/' + this.cpuBrand[index].id).then(this.refreshAll)
          break
        case 'gpu':
          this.$http.delete('/gpu/brand/' + this.gpuBrand[index].id).then(this.refreshAll)
          break
      }
    }
  }
}
</script>
